<template>
  <div id="mychart" ref="mychart"
       style="width: 80%;height: 60%;margin-top: 150px;margin-left: 150px">
  </div>
</template>
<script>
import * as echarts from 'echarts/core';
import {GridComponent} from 'echarts/components';
import {LineChart} from 'echarts/charts';
import {UniversalTransition} from 'echarts/features';
import {CanvasRenderer} from 'echarts/renderers';

echarts.use([GridComponent, LineChart, CanvasRenderer, UniversalTransition]);

export default {
  name: "ChartYear",
  props:{
    data:{

    }
  },
  methods: {
    createChart() {
      let option = {
        title: {
          text: "各学院学生心理咨询次数统计"
        },
        gird:{
          height:"600px"
        },
        legend: {
          data: ["总人次", "计算机", "自动化"]
        },
        xAxis: {
          type: 'category',
          data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jue', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: "总人次",
            data: [3, 12, 15, 23, 6, 2, 0, 1, 9, 16, 12, 11],
            type: 'line',
            smooth: true
          },
          // {
          //   name: "计算机",
          //   data: [1, 7, 10, 13, 2, 1, 0, 0, 3, 14, 7, 6],
          //   type: 'line',
          //   smooth: true
          // },
          // {
          //   name: "自动化",
          //   data: [2, 5, 5, 10, 2, 0, 0, 1, 6, 2, 5, 5],
          //   type: 'line',
          //   smooth: true
          // }

        ]
      };
      option.series[0].data=this.data;
      const mychart = echarts.init(this.$refs.mychart)
      mychart.setOption(option);
      // option && myChart.setOption(option);
    }
  },
  mounted() {
    this.data=[0,0,0,0,0,0,0,0,0,0,0,0]
    this.init();
  },
  watch:{
    data(newVal, oldVal) {
      this.createChart()
    }
  }
}
</script>
